<template>
    <div class="loginbigbox">
        <h3 class="title">天瑞智能医疗系统</h3>
        <div class="content">
            <div class="pic">

            </div>
            <div class="right" >
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <!-- 手机号登陆 -->
                    <el-tab-pane label="手机号" name="first" >
                        <div class="con">
                            <el-input v-model="obj.phone" placeholder="请输入手机号" ></el-input>
                            <div class="yanzhengma">
                                <el-input v-model="obj.code" placeholder="请输入验证码"/>
                                <el-row>
                                    <el-button 
                                        type="primary" 
                                        @click="getVdtcode" 
                                        v-loading.fullscreen.lock="loading" 
                                        v-model='vdtMsg'>
                                        {{vdtMsg}}
                                    </el-button>
                                </el-row>
                            </div>
                                <el-checkbox v-model="rememberphone">记住手机号</el-checkbox>
                                <el-checkbox v-model="autologin">免登陆</el-checkbox>
                            <el-button  type="primary" @click="loginEvt" class="btn">登陆</el-button>
                            <a href='../register' target="_blank">没有账号？去注册</a>
                        </div>
                    </el-tab-pane>

                    <!-- 账号登陆 感觉接口有问题  尝试后无果-->
                    <!-- <el-tab-pane label="账号" name="second">
                        <div class="con">
                            <el-input v-model="obj1.userid" placeholder="请输入账号" ></el-input>
                            <el-input v-model="obj1.password" placeholder="请输入密码" :type="'password'"></el-input>
                            <el-checkbox v-model="rememberuser" >记住账号</el-checkbox>
                            <el-checkbox v-model="autologin" >免登陆</el-checkbox>
                            <el-button  type="primary" @click="userloginEvt" class="btn">登陆</el-button>
                        </div>
                    </el-tab-pane> -->
                    <el-tab-pane label="扫码" name="second">
                        <div class="con" >
                            <!-- 这里是显示二维码首先 -->
                            <img :src="src" v-show='!showrefresh'>
                            <!-- 这里是二维码失效过期显示   然后增加一个点击事件 -->
                            <i @click="setlogintype" class='refresh-icon' v-show="showrefresh">刷新</i>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
    //引入我们的loginApi接口  解构赋值出来
    import { phoneApi,loginEvtApi,menuListApi,userInfoApi,autoCodeApi,autologinApi,userrightApi,userloginEvtApi,qrcodeApi,qrcodeLoopApi } from '../../apis/loginApi'
    import QRCode from 'qrcode'
    import './login.less'

    export default {
        data(){
            return{
                obj:{
                    //这个是我们获取验证码  和 登陆接口都需要的对象
                    phone:'',
                    code:'',
                },
                // obj1:{
                //     userid:'',
                //     password:''
                // },
                //这个是我们的加载状态
                loading:false,
                rememberphone:false,
                autologin:false,
                vdtMsg:'获取验证码',
                activeName: 'first',
                //这是我们的扫码绑定的图片
                src:'',
                // 这里是初始
                showrefresh:false
            }
        },
        created(){
            //在页面打开时  获取电话号码
            let phone =JSON.parse(localStorage.getItem('user-login')) 
            //如果没有记住电话号码
            if(!this.rememberphone){
                //记住  并且将取出的手机号给this.obj.phone
                this.rememberphone = true
                this.obj.phone = phone
            }
            //如果没有
            if(!this.obj.phone){
                //将记住改为false
                this.rememberphone = false
            }
            //自动登陆
            let tok = localStorage.getItem('user-code')
            //又票据
            if(tok){
                //请求自动登陆
                autologinApi(tok).then(it=>{
                    this.$router.push('/home')
                })
                this.autologin = true
            }else{
                this.autologin = false
            }
           
        },
        methods:{
            setlogintype(){
            //这里点击之后就让二维码显示
              this.showrefresh = false
               qrcodeApi().then(d=>{
                        if(d.code===200){
                            let opts = {
                                errorCorrectionLevel:'H',
                                type:"image/png",
                                quality:1,
                                width:300,
                                height:300,
                                text:"http://localhost:18888/home",
                                color:{
                                    dark:'#419cf1',
                                    light:'e9f1f6',
                                }
                            }
                            
                            QRCode.toDataURL(d.qrcode,opts,(err,url)=>{
                                this.src = url;
                                let _this = this;
                                 function loop() {
                                    //这里是去轮询二维码
                                    qrcodeLoopApi(d.qrcode).then(d => {
                                        if(d.code === 300){
                                            window.clearTimeout(_this.times)
                                            _this.times = null
                                            _this.times = setTimeout(() => {
                                                loop()
                                            }, 1000);
                                        }else if(d.code===200){
                                             _this.$router.push('/home')
                                        }else if(d.code === 400){
                                            //这里是票据过期 就隐藏二维码
                                            _this.showrefresh = true
                                        }
                                    })
                                }
                                loop()
                            })
                        }
                    })
            },


            //这是获取验证码的事件
             getVdtcode(){
                //这里先验证手机号是否正确
                if(!this.obj.phone || !/^1[3-9]{1}[0-9]{9}$/.test(this.obj.phone)){
                    this.$message({
                        message: '手机号码输入错误',
                    })
                    return
                }
                if(this.vdtMsg!=='获取验证码') return
                this.vdtMsg === '获取中'
                //我们点击获取验证码的时候  网络可能 有延迟，那么在这一段延迟时间内  我们可以用一个加载状态来等待
                this.loading = true
                //这里是把手机号传递给我们的接口方法
                phoneApi(this.obj.phone).then(res => {
                    if(res.code === 200){
                        this.obj.code = res.vdtCode
                        //这里我们调取looptimer方法  并传递一个时间参数过去
                        this.loopTimer(Date.now())
                    }else{
                        this.vdtMsg === '获取验证码'
                        this.$message(res.message)
                    }
                    //请求回来数据之后  我们将状态变成false
                    setTimeout(() => {
                        this.loading = false   
                    });
                })
            },
            loopTimer(startTime) {
                //这里是一个现在的时间
                let nowTime = Date.now()
                //这里是现在的时间 减去开始的时间 然后向上取整  然后除以1000 得到秒数
                //然后我们 再用 6 减去这个时间  意思就是 过去一秒 减去 一秒 还剩多少秒
                let passTime = 6 - Math.ceil((nowTime - startTime) / 1000)
                //这里定义了一个定时器
                let timer = setTimeout(() => {
                    //这里我们进来就清除定时器
                    clearTimeout(timer)
                    //判断  当我们的剩余时间  小于1   
                    if (passTime < 1) {
                        //那么就让我们的vdtMsg  里面的值 显示获取验证码  让我们可以 点击
                        this.vdtMsg = '获取验证码'
                    } else {
                        //否则就让 我们的vdtMsg 值显示为重新获取(${passTime}s)   让我们点击不了
                        this.vdtMsg = `重新获取(${passTime}s)`
                        //这是  当我们时间走完之后  我们应该又可以点击  又要重新执行这个时间  然后又要传递一个开始时间进去
                        this.loopTimer(startTime)
                    }
                }, 200)
            },

            //账号登陆事件 尝试后无果
            // async userloginEvt(){
            //     this.loading = true
            //     let res = await userloginEvtApi(this.obj1)
            //     if(res.code!==200){
            //         this.$message('登录失败')
            //         return
            //     }else{
            //         alert(11)
            //     }
            // },

            //手机号登陆事件
            async loginEvt(){
                this.loading = true
                //这里是登陆接口  把我们的obj对象传递给接口方法
                let result = await loginEvtApi(this.obj)
                    if(result.code !== 200){
                        this.$message('登陆失败')
                        return
                   }else{
                        //我们请求成功验证码登陆接口之后 会得到一个token  一个userid  将他们存进数仓
                        this.$store.commit('common/mutationToken',result.token)
                        localStorage.setItem('token',result.token)
                        this.$store.commit('common/mutationUserId',result.userid) 
                   }

                   //请求用户信息接口
                    userInfoApi(result.userid).then(item=>{
                        if(item.code===200){
                            this.$store.commit('common/mutationuserinfo',item.data)
                        }
                    })

                    //请求用户权限接口
                    let role = this.$store.getters['common/userinfo']
                    userrightApi(role.role).then(item=>{
                        this.$store.commit('common/mutationuserRight',item.data)
                    })

                   //我们请求成功 用户菜单列表接口之后  会得到一个对象
                   //对象里面有code码  还有一个data对象
                   //这个data对象里面有count  还有一个我们的 rows数组
                   let menu = await menuListApi()
                   //我们将这个数组存进数仓
                   if (menu.code === 200) {
                        this.$store.commit('common/mutationMenuList', menu.data.rows)
                        localStorage.setItem('menuList',JSON.stringify(menu.data.rows))
                    }
                 
                    //记住手机号
                    if (this.rememberphone) {
                        //将手机号存入localstorage
                        localStorage.setItem('user-login', JSON.stringify(this.obj.phone))
                        //将号码赋值给this.obj.phone
                        this.obj.phone = localStorage.getItem('user-login')
                    } else {
                        localStorage.removeItem('user-login')
                    }

                    //自动登陆票据
                    if (this.autologin) {
                        /** 获取免登录票据 */
                        let code = await autoCodeApi()
                        if (code.code === 200) {
                            //将免登陆票据存入localstorage
                            localStorage.setItem('user-code', code.autocode)
                        }
                    } else {
                        localStorage.removeItem('user-code')
                    }
                    setTimeout(() => {
                        this.$router.push('/home')
                    })
            },  
            
            //扫码登陆事件
            handleClick(tab, event) {
                
               if(tab.label==='扫码' && tab.name === 'second' && tab.index === "1"){
                    //获取二维码票据
                    qrcodeApi().then(d=>{
                        if(d.code===200){
                            let opts = {
                                errorCorrectionLevel:'H',
                                type:"image/png",
                                quality:1,
                                width:300,
                                height:300,
                                text:"http://localhost:18888/home",
                                color:{
                                    dark:'#419cf1',
                                    light:'e9f1f6',
                                }
                            }
                            
                            QRCode.toDataURL(d.qrcode,opts,(err,url)=>{
                                this.src = url;
                                let _this = this;
                                 function loop() {
                                    //这里是去轮询二维码
                                    qrcodeLoopApi(d.qrcode).then(d => {
                                        if(d.code === 300){
                                            window.clearTimeout(_this.times)
                                            _this.times = null
                                            _this.times = setTimeout(() => {
                                                loop()
                                            }, 1000);
                                        }else if(d.code===200){
                                            _this.$store.commit('common/mutationToken',d.token)
                                            _this.$store.commit('common/mutationUserId',d.userid)
                                            let menuList = localStorage.getItem('menuList')
                                            _this.$store.commit('common/mutationMenuList',JSON.parse(menuList) )
                                            setTimeout(() => {
                                               _this.$router.push('/home') 
                                            });
                                            
                                        }else if(d.code === 400){
                                            //这里是票据过期 就隐藏二维码
                                            _this.showrefresh = true
                                        }
                                    })
                                }
                                loop()

                            })

                        }
                    })
               }
            },
        }
    }
    </script>